<template>
    <div>
      <Nav></Nav>
      <Shopnav></Shopnav>
      <div class="sucess">
        <div class="suc-tit">
          <img src="/static/lyl/888.png" alt="">
          <p>订单已提交，请于24小时内完成支付 <span>（逾期订单将被取消）</span></p>
        </div>
        <p>
          <img src="/static/lyl/location.png" alt="">
          <span>送货至:</span>
          <span>{{shtml}}</span>
        </p>
        <div class="suc-pay">
          <span>应付金额:</span>
          <span>{{this.$store.state.pay}}</span>
          <span>（在线支付）</span>
          <span>订单编号:425954156947</span>
          <p>支付平台</p>
          <label>
            <input type="radio" name="pay">
            <img src="/static/lyl/zhifubao.png" alt="">
          </label>
          <label>
            <input type="radio" name="pay">
            <img src="/static/lyl/weixin.png" alt="">
          </label>
          <label>
            <input type="radio" name="pay">
            <img src="/static/lyl/yinlian.png" alt="">
          </label>
          <label>
            <input type="radio" name="pay">
            <img src="/static/lyl/yue.png" alt="">
          </label>
        </div>
        <div class="suc-qrcode">
          <div class="suc-code-left">
            <p>使用电脑支付</p>
            <img src="/static/lyl/cpu.png" alt=""><br>
            <button>立即支付</button>
          </div>
          <span>或</span>
          <div class="suc-code-right">
            <p>使用支付宝钱包扫一扫付款</p>
            <img src="/static/lyl/zer.png" alt="">
          </div>
        </div>
        <div class="suc-shouji">
          <img src="/static/lyl/shiji.png" alt="">
          <div class="suc-shouji-right">
            <p>使用微信扫一扫付款</p>
            <img src="/static/lyl/wer.png" alt="">
          </div>
        </div>
      </div>

      <Footer></Footer>
    </div>
</template>

<script>
  import Nav from '../com/Nav'
  import Footer from '../com/Footer'
  import Shopnav from './Shopnav'
    export default {
      name: "Dingsucess",
      computed:{
        shtml(){
          let str = this.$store.state.usernam2+' '+this.$store.state.cityinfo2+' '+this.$store.state.addss2+' 手机号 '+this.$store.state.pone2;
          return str;
        }
      },
      components:{
        Nav,
        Footer,
        Shopnav
      }
    }
</script>

<style scoped>
  .sucess{
    width: 1280px;
    margin: auto;
  }
  .sucess .suc-tit{
    text-align: center;
    padding: 80px 0;
  }
  .sucess .suc-tit img{
    width: 80px;
    margin-bottom: 60px;
  }
  .sucess .suc-tit p{
    font-size: 24px;
  }
  .sucess .suc-tit p span{
    color: #f08200;
  }
  .sucess>p{
    background: #f4fff2;
    padding: 10px;
    border: 1px solid #e9e9e9;
  }
  .sucess>p span{
    font-size: 14px;
    color: #666;
    margin-left: 10px;
  }
  .sucess>p img{
    width: 17px;
    vertical-align: bottom;
  }
  .sucess .suc-pay{
    padding: 40px 0;
  }
  .sucess .suc-pay:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0;
  }
  .sucess .suc-pay span{
    font-size: 18px;
  }
  .sucess .suc-pay span:nth-child(2){
    font-size: 20px;
    color: #f08200;
  }
  .sucess .suc-pay span:nth-child(4){
    font-size: 16px;
    color: #666;
    text-align: right;
    float: right;
  }
  .sucess .suc-pay>p{
    padding: 40px 0 20px;
    font-size: 18px;
    color: #666;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 40px;
  }
  .sucess .suc-pay label img{
    width: 130px;
    height: 40px;
    border: 1px solid #e9e9e9;
    vertical-align: middle;
    margin-left: 10px;
  }
  .sucess .suc-pay label{
    margin-right: 40px;
  }
  .suc-qrcode{
    border: 1px solid #e9e9e9;
    display: flex;
    justify-content: space-between;
    padding: 60px 297px;
    margin-bottom: 40px;
  }
  .suc-qrcode p{
    font-size: 18px;
    color: #666;
    margin-bottom: 40px;
  }
  .suc-qrcode .suc-code-left{
    text-align: center;
  }
  .suc-qrcode>span{
    align-self: center;
    font-size: 18px;
    color: #666;
  }
  .suc-qrcode .suc-code-right{
    text-align: center;
  }
  .suc-qrcode .suc-code-left button{
    width: 170px;
    height: 45px;
    background: #f08200;
    border-radius: 5px;
    font-size: 18px;
    color: #fff;
    margin-top: 40px;
    cursor: pointer;
  }
  .suc-shouji{
    border: 1px solid #e9e9e9;
    display: flex;
    justify-content: space-between;
    padding: 60px 297px 60px 240px;
    margin-bottom: 40px;
  }
  .suc-shouji .suc-shouji-right{
    text-align: center;
  }
  .suc-shouji .suc-shouji-right p{
    font-size: 18px;
    color: #666;
    margin-bottom: 80px;
  }
</style>
